<!DOCTYPE html>

<html class="no-js" lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>Product Detail</title>

     <!-- Bootstrap Core CSS -->
    <link href="css/bootstrap.css" rel="stylesheet">   
    <link href="css/bootstrap-theme.css" rel="stylesheet">   

    <!-- Custom CSS -->
    <link href="css/shop-homepage.css" rel="stylesheet">    

    <!-- Demo CSS -->   
    <link rel="stylesheet" href="css/flexslider.css" type="text/css" media="screen" />

    <script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
    <!-- Bootstrap Core JavaScript -->
    <script src="js/bootstrap.js"></script>
    <script type="text/javascript" src="js/bootbox.js"></script>
    <script type="text/javascript">
        $(function() {
            $('#form-nav-bar').load('navbar.html');
            $.getScript("js/Login.js", function(){});
        });
    </script>
    <!-- Modernizr -->
    <script src="js/modernizr.js"></script>

</head>
<body>
    <div class="alert alert-success" role="alert" style="display:none; z-index: 1000; position: absolute; left:0px; top: 50px;">
      <span>populate alert</span>
    </div>
    <!-- Navigation -->
    <nav id="form-nav-bar" class="navbar navbar-inverse navbar-fixed-top" role="navigation">        
        <!-- /.container -->
    </nav>
    <form runat="server">
        <div class="container">        
        <div class="row">
            <div class="col-md-4">               
                <div id="main" role="main">
                  <section class="slider">
                    <div id="slider" class="flexslider">
                      <ul id="the-slider" class="slides">                        
                      </ul>
                    </div>
                    <div id="carousel" class="flexslider">
                      <ul id="the-carousel" class="slides">                        
                      </ul>
                    </div>
                  </section>     
                </div>
               
                <!-- container -->
            </div>
            <div class="col-md-8">
                <div class="row">
                    <h2 id="product-name" class="featurette-heading">And lastly, this one.</h2>                           
                    <h2><span id="product-price" class="text-muted">Checkmate.</span></h2>
                    <p id="product-detail" class="lead"></p>
                    <div class="col-md-3">
                        <div class="row">
                            <div class="form-group">
                                <label class="control-label">จำนวน</label>
                                <input type="number" min="1" id="txt-product-qty" class="form-control">
                            </div>
                        </div>
                        <input type="text" id="txt-product-price" class="hidden">
                        <input type="text" id="txt-product-code" class="hidden">
                        <div class="row">
                            <a id="btn-buy-now" class="glyphicon glyphicon-shopping-cart btn btn-primary" href="#" role="button">  สั่งซื้อ</a>
                        </div>
                    </div>
                </div>               
            </div>           
        </div>
    </div>
    </form> 
    
    <script type="text/javascript" src="js/jquery.flexslider.js"></script>

     <!-- Optional FlexSlider Additions -->
    <script src="js/jquery.easing.js"></script>
    <script src="js/jquery.mousewheel.js"></script>
    <script defer src="js/demo.js"></script> 
    <script type="text/javascript">
        $(window).load(function () {            

            $('#carousel').flexslider({
                animation: "slide",
                controlNav: false,
                animationLoop: false,
                slideshow: false,
                itemWidth: 120,
                itemMargin: 5,
                asNavFor: '#slider'
            });

            $('#slider').flexslider({
                animation: "slide",
                controlNav: false,
                animationLoop: false,
                slideshow: false,
                sync: "#carousel",
                start: function (slider) {
                    $('body').removeClass('loading');
                }
            });
        });

        $(document).ready(function () {            

            if (typeof Earrings != 'undefined') {
                if (Earrings) {
                    getEarringsData();
                }
            }
        });

        function getEarringsData() {

            // ERCode
            // ERName
            // ERDetail
            // ERPrice
            // ERImage
            // ERImageSide
            // ERImageSize
            // ERImageSample
            var er = Earrings[0][0];
            var htmlText = '';
            if (er.ERImage != '') {
                htmlText += '<li><img src="' + er.ERImage + '" class="thumbnail" /></li>';
            }
            if (er.ERImageSide != '') {
                htmlText += '<li><img src="' + er.ERImageSide + '" class="thumbnail"  /></li>';
            }
            if (er.ERImageSize != '') {
                htmlText += '<li><img src="' + er.ERImageSize + '" class="thumbnail"  /></li>';
            }
            if (er.ERImageSample != '') {
                htmlText += '<li><img src="' + er.ERImageSample + '" class="thumbnail"  /></li>';
            }
            $('#the-carousel').html(htmlText);
            $('#the-slider').html(htmlText);
            $('#product-name').html(er.ERName);
            $('#product-price').html(Number(er.ERPrice).formatMoney() + ' บาท');
            $('#txt-product-price').val(er.ERPrice);
            $('#product-detail').html(er.ERDetail);
            $('#txt-product-code').val(er.ERCode);
        }

        var btnBuyNow = document.getElementById('btn-buy-now');
        btnBuyNow.onclick = function() {           
            var er_code = document.getElementById('txt-product-code').value;
            var qty = document.getElementById('txt-product-qty').value;
            //call ajax
            $.ajax({
                type: "POST",
                dataType: "json",
                crossDomain: true,
                url: "http://localhost:49331/WSRestFul.asmx/RecalQty",
                data: { ERCode: er_code, Qty: qty }
            }) //ajax
            .done(function (data) {
                Toast.init({
                    "selector": ".alert-success"
                });
                Toast.show("<strong>" + $('#product-name').html() + "</strong><br>เพิ่มเข้าตะกร้าสินค้าของท่านแล้ว");

                var tmp = parseInt($('span.badge').html());
                tmp += parseInt($('#txt-product-qty').val());
                $('span.badge').html(tmp);
            }) //done
            .fail(function (data) {
                bootbox.dialog({
                    title: 'Fatal Error',
                    message: '<div class="alert alert-danger" role="alert"><strong>Error in connection !!!</strong></div>'
                });//boobox
            }) //fail
        }
    </script>
    
</body>
</html>